<template>
  <div id="invoicepdf" class="dashboard-container">
    <h2 class="head-big-title">Pesanan Saya</h2>
    <Pathnavigation style="margin-left: 3%;"></Pathnavigation>
    <el-card shadow="always" style="width: 92%;margin: 20px 4% 0 4%;padding: 10px 2% 3px 2%;border-radius: 10px;background-color: white;text-align: left;clear: both;" :body-style="{ padding: '15px 0 25px 20px' }" v-if="role != dealerValue">
      <h2 style="line-height: 36px;">{{detailData.dealerBrief.dealerName}}</h2>
      <div style="width: 55%;float: left;">
        <p style="margin-top: 12px;">
          <svg-icon icon-class="ico_address"></svg-icon>
          {{detailData.dealerBrief.shopAddr.streetAddress + ', ' +detailData.dealerBrief.shopAddr.regionalAddress + ', ' + detailData.dealerBrief.shopAddr.postCode + ', ' + detailData.dealerBrief.shopAddr.city + ', ' + detailData.dealerBrief.shopAddr.region}}</p>
        <p style="margin-top: 12px;">
          <svg-icon icon-class="ico_mail"></svg-icon>
          {{detailData.dealerBrief.emailAddress}}</p>
        <p style="margin-top: 12px;">
          <svg-icon icon-class="ico_phone"></svg-icon>
          {{detailData.dealerBrief.shopAddr.phoneNumber}}</p>
      </div>
      <div style="width: 40%;float: left;">
        <el-image
          style="width: 70px;height: 70px;margin-left: 30px;"
          :src="require('@/assets/m_logo.png')"></el-image>
      </div>
    </el-card>
    <el-card shadow="always" v-else style="width: 92%;margin: 20px 4% 0 4%;padding: 10px 2% 3px 2%;border-radius: 10px;background-color: white;text-align: left;clear: both;" :body-style="{ padding: '15px 0 25px 20px' }">
      <h2 style="line-height: 36px;">{{detailData.dealerBrief.dealerName}}</h2>
      <div style="width: 55%;float: left;">
        <p style="margin-top: 12px;">
          <svg-icon icon-class="ico_address"></svg-icon>
          {{detailData.dealerBrief.shopAddr.streetAddress + ', ' +detailData.dealerBrief.shopAddr.regionalAddress + ', ' + detailData.dealerBrief.shopAddr.postCode + ', ' + detailData.dealerBrief.shopAddr.city + ', ' + detailData.dealerBrief.shopAddr.region}}</p>
        <p style="margin-top: 12px;">
          <svg-icon icon-class="ico_mail"></svg-icon>
          {{detailData.dealerBrief.emailAddress}}</p>
        <p style="margin-top: 12px;">
          <svg-icon icon-class="ico_phone"></svg-icon>
          {{detailData.dealerBrief.shopAddr.phoneNumber}}</p>
      </div>
      <div style="width: 40%;float: left;">
        <el-image
          style="width: 70px;height: 70px;margin-left: 30px;"
          :src="picbase + detailData.dealerBrief.logoUrl"></el-image>
      </div>
    </el-card>
    <el-card shadow="always" class="" :body-style="{ padding: '15px 0 10px 20px' }" style="width: 92%;margin: 20px 4% 0 4%;padding: 10px 2% 3px 2%;border-radius: 10px;background-color: white;text-align: left;clear: both;">
      <p><label style="float: left;text-align: left;width: 45%;display: inline-block;">Nombor Pesanan</label><span style="float: left;">: </span>{{ detailData.oid }}</p>
      <p><label style="float: left;text-align: left;width: 45%;display: inline-block;">Tarikh</label><span style="float: left;">: </span>{{ $getTime(detailData.updateAt) }}</p>
    </el-card>
    <el-form label-position="top" label-width="80px" style="width: 92%;margin: 20px 4% 0 4%;padding: 10px 2% 3px 2%;border-radius: 10px;background-color: white;text-align: left;clear: both;">
      <el-form-item label="Status" class="one-form-item">
        <el-select class="input-width" v-model="detailData.state" disabled @input="changeNew($event)" placeholder="Status">
          <el-option label="Semua" value=""></el-option>
          <el-option v-for="(item, index) in $orderStateList" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Tarikh Penghantaran" class="one-form-item">
        <el-date-picker
          disabled
          v-model="detailData.updateAt"
          class="input-width"
          type="datetime"
          placeholder="Tarikh">
        </el-date-picker>
      </el-form-item>
<!--              <el-button-->
<!--                disabled-->
<!--                style="position: relative;top: 52px;margin-left: 30px;"-->
<!--                type="primary"-->
<!--                @click="handleUpdate()"-->
<!--                size="small">更新-->
<!--              </el-button>-->
    </el-form>
    <el-card shadow="always" :body-style="{ padding: '15px 0 25px 20px' }" style="width: 92%;margin: 20px 4% 0 4%;padding: 10px 2% 3px 2%;border-radius: 10px;background-color: white;text-align: left;clear: both;">
      <p><label style="float: left;text-align: left;width: 45%;display: inline-block;">Jumlah Kecil</label><span style="float: left;">: </span>{{ $formatMoneyStr(detailData.puductFee) }}</p><br>
      <p><label style="float: left;text-align: left;width: 45%;display: inline-block;">Jumlah Penghantaran</label><span style="float: left;">: </span>{{ $formatMoneyStr(detailData.deliveryFee) }}</p><br>
      <p><label style="float: left;text-align: left;width: 45%;display: inline-block;">Penyesuaian</label><span style="float: left;">: </span>{{ $formatMoneyStr(detailData.adaptFee) }}</p>
      <el-divider></el-divider>
      <p><label style="float: left;text-align: left;width: 45%;display: inline-block;">Jumlah Pesanan</label><span style="float: left;">: </span>{{ $formatMoneyStr(detailData.subFee) }}</p>
    </el-card>
    <el-card shadow="always" style="width: 92%;margin: 20px 4% 0 4%;padding: 10px 2% 3px 2%;border-radius: 10px;background-color: white;text-align: left;clear: both;" :body-style="{ padding: '15px 0 25px 20px' }">
      <h2 style="line-height: 36px;">Alamat Bil</h2>
      <p>
        <svg-icon icon-class="ico_user"></svg-icon>
        {{detailData.billesAddres.name}}</p>
      <p style="margin-top: 12px;">
        <svg-icon icon-class="ico_address"></svg-icon>
        {{ detailData.billesAddres.streetAddress + ', ' +detailData.billesAddres.regionalAddress + ', ' + detailData.billesAddres.postCode + ', ' + detailData.billesAddres.city + ', ' + detailData.billesAddres.region }}</p>
      <p style="margin-top: 12px;">
        <svg-icon icon-class="ico_phone"></svg-icon>
        {{detailData.billesAddres.phoneNumber}}</p>
    </el-card>
    <el-card shadow="always" style="width: 92%;margin: 20px 4% 0 4%;padding: 10px 2% 3px 2%;border-radius: 10px;background-color: white;text-align: left;clear: both;" :body-style="{ padding: '15px 0 25px 20px' }">
      <h2 style="line-height: 36px;">Alamat Penghantaran</h2>
      <p>
        <svg-icon icon-class="ico_user"></svg-icon>
        {{detailData.shopAddres.name}}</p>
      <p style="margin-top: 12px;">
        <svg-icon icon-class="ico_address"></svg-icon>
        {{ detailData.shopAddres.streetAddress + ', ' +detailData.shopAddres.regionalAddress + ', ' + detailData.shopAddres.postCode + ', ' + detailData.shopAddres.city + ', ' + detailData.shopAddres.region }}</p>
      <p style="margin-top: 12px;">
        <svg-icon icon-class="ico_phone"></svg-icon>
        {{detailData.shopAddres.phoneNumber}}</p>
      <p style="margin-top: 12px;">
        <svg-icon icon-class="ico_delivery_note"></svg-icon>
        {{detailData.sysOrderMsg.buyerMsg?detailData.sysOrderMsg.buyerMsg:'Nota Penghantaran Sini'}}</p>
    </el-card>
    <el-table
      :data="detailData.detail"
      style="width: 92%;margin: 20px 4% 0 4%;padding-left: 10px;border-radius: 20px;text-align: center;">
      <el-table-column label="Logo" width="100">
        <template slot-scope="scope">
          <el-image
            style="width: 64px; height: 64px"
            :src="picbase + scope.row.picUrl"></el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" label="Nama Produk">
        <template slot-scope="scope">
          <p>{{ scope.row.productName }}</p>
          <p>* {{ scope.row.quantity }}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="Harga Seunit">
        <template slot-scope="scope">
          <p>1 {{ scope.row.buyunit }}</p>
          <p>{{ $formatMoneyStr(scope.row.price) }}</p>
        </template>
      </el-table-column>
<!--      <el-table-column prop="quantity" align="center" label="Kuantiti"></el-table-column>-->
<!--          <el-table-column prop="money" label="单价"></el-table-column>-->
      <el-table-column label="Jumlah">
        <template slot-scope="scope">
          <p>{{ $formatMoneyStr(scope.row.allmoney) }}</p>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      :data="detailData.stateChangeRecode"
      style="width: 92%;margin: 20px 4% 0 4%;padding-left: 10px;border-radius: 20px;text-align: center;">
      <el-table-column label="Date Added">
        <template slot-scope="scope">
          <p>{{$getTime(scope.row.stateChageAt)}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="stateDescrip" label="Status"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { order_editApi, infoMyorderApi } from '@/api/user'

export default {
  name: 'Report',
  computed: {
    ...mapGetters([
      'name',
      'role'
    ])
  },
  data() {
    return {
      msg: 'Selamat Datang',
      detailData: {
        sysOrderMsg: {},
        detail: [],
        stateChangeRecode: []
      }
    }
  },
  mounted() {
    this.checkID()
  },
  methods: {
    downloadPrint() {
      this.$print(this.$refs.print)
    },
    changeNew() {
      this.$forceUpdate()
    },
    checkID() {
      const oid = this.$route.params.id
      if (!(oid.length && oid.length > 3)) {
        this.$router.push({ path: '/My-Orders/Query' })
      }
      infoMyorderApi({
        oid: oid
      }).then(res => {
        this.detailData = res.data
        if (this.detailData.billesAddres == null) {
          this.detailData.billesAddres = {}
        }
        if (this.detailData.shopAddres == null) {
          this.detailData.shopAddres = {}
        }
        if (this.detailData.dealerBrief == null) {
          this.detailData.dealerBrief = {}
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleUpdate() {
      order_editApi({
        state: this.detailData.state,
        oid: this.detailData.oid
      }).then(res => {
        this.$message({
          message: 'Berjaya',
          type: 'success'
        })
        this.$router.push({ path: '/My-Orders/Query' })
      }).catch(err => {
        console.log(err)
      })
    }
  }
}

</script>

<style lang="scss" scoped>
  .dashboard {
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .head-big-title{
    text-align: left;
    font-size: 20px;
    margin: 20px 0 0 3%;
  }
  .big-title{
    text-align: left;
    font-size: 19px;
    margin: 20px 0 20px 3%;
    clear: both;
  }
  .one-form-item{
    display: block;
    .el-select{
      width: 100%;
    }
    .el-input{
      width: 100%;
    }
  }
  .dashboard-container{
    margin-top: 20px;
    text-align: center;
  }

  .two-card-not + .two-card-not{
    margin-left: 2%;
  }
  .two-card-a{
    width: 65%;
  }
  .two-card-b{
    width: 33%;
  }
  .two-card-not{
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 15px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .two-card + .two-card{
    margin-left: 2%;
  }

  .two-card{
    width: 49%;
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 15px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .one-card{
    width: 100%;
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 19px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .last-days-order{
    width: 92%;
    margin: 0 4%;
    border-radius: 20px;
  }
  .last-days-order .erchart-div{
    height:278px;display: inline-block;background-color: white;border-radius: 10px;
  }
  .header-div{
    float: right;
    text-align: center;
    margin-right: 64px;
    position: relative;
    bottom: 21px;
  }
  .header-div p{
    margin: 10px 0;
  }
  .header-div img{
    width: 64px;
    height: 64px;
  }
  .head-info-three{
    width: 28%;
    margin-right: 20px;
    margin-bottom: 15px;
    display: inline;
    float: left;
  }
  .card-div{
    width: 94%;text-align: left;margin: 0 3%
  }
  .margin-tops{
    margin-top: 5px;
  }
  .card-div .middle-info{
    width: 32%;
    display: inline-block;
    margin: 8px 0;
  }
  .total-sum-div{
    padding: 20px;
    text-align: left;
    width: 420px;float: right;margin-right: 4%;
  }
  .total-sum-div .middle-info{
    margin-left: 60px;
  }
  .total-sum-div .middle-info label{
    width: 100px;
    display: inline-block;
  }
  .card-div .two-info{
    width: 49%;
    display: inline-block;
    margin: 8px 0;
    i{
      width: 21px;
    }
  }
  .one-info{
    display: block;
    margin: 0;
    line-height: 21px;
    text-align: right;
    label{
      width: 42%;
      display: inline-block;
      float: left;
    }
  }
</style>
